<template>
  <div class="row" v-bind:style="{ 'margin-left': nestedPixelOffset + 'px' }">
    <draggable :list="nestedList" :group="groupName" v-bind="dragOptions">

      <transition-group>
        <div v-for="subListParent in nestedList" :key="subListParent.id" class="list-group-item">
          <div>{{ subListParent.name }}
            <el-button @click="addNode(subListParent)" size="small">添加节点</el-button>
          </div>

<!--          调用组件自身来进行嵌套-->
          <nested-draggable
            :nested-pixel-offset="nestedPixelOffset+20"
            :group-name="groupName"
            :nested-list="subListParent.tasks"/>

        </div>
      </transition-group>


    </draggable>


  </div>
</template>

<script>

import draggable from "vuedraggable";
import {uuid} from 'vue-uuid'

export default {
  name: "NestedDraggable",
  display: "Nested",
  components: {
    draggable
  },
  props: {
    /**
     * 传入的 嵌套数组
     * */
    nestedList: {
      type: Array,
      required: true
    },
    /**
     * 所有 draggable 组件的 group 必须完全一致才能进行相互间的拖拽
     */
    groupName: {
      type: String,
      required: true
    },

    /**
     * 嵌套 draggable 组件的向右偏移像素点
     * */
    nestedPixelOffset: {
      required: false,
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {
    /**
     * 拖拽动画效果的选项
     * 直接通过 v-bind="dragOptions" 绑定到 draggable 组件上
     * v-bind 会自动把 dragOptions 中的所有属性展开并 依次绑定
     */
    dragOptions() {
      return {
        animation: 200,

        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  methods: {
    addNode(subListParent) {

      subListParent.tasks.push({
        id: uuid.v4(),
        name: "新建节点",
        tasks: []
      })
    }
  }

};
</script>

<style scoped>
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}
</style>
